<template>
	<div class="hot">
		<!-- hot区域 -->
		<div class="hot_header">
			<h3>轮播广告图</h3>
			<router-link to="hotedit">添加新的轮播图</router-link>
		</div>
		<div class="hot_middle">
			<ol>
				<li>描述</li>
				<li>热度</li>
				<li>类型</li>
				<li>图片</li>
				<li>删除</li>
			</ol>
			<ol v-for="(item) in hot_list" :key="item.id">
				<li>{{item.memo}}</li>
				<li>{{item.hot}}</li>
				<li>{{item.type}}</li>
				<li><img :src="`${$Imgurl}/api/public/showImg/${item.picture}`"></li>
				<li><button @click="del(item.id)">删除</button></li>
			</ol>
		</div>
	</div>
</template>

<script>
	export default{
		name : 'Hot',
		data(){
			return {
				hot_list : []
			}
		},
		methods:{
			del(val){
				// console.log(val);
				this.axios.delete( '/api/adm/hot/delete/'+val ).then( (res)=>{
					// console.log(res.data.data);
					this.location();
				} ).catch( (error)=>{
					console.log(error);
				} );
			},
			location(){
				this.axios.get( '/api/adm/hot/findAll' ).then( (res)=>{
					if( res.status === 200 ){
						// console.log(res.data.data);
						this.hot_list = res.data.data
						// console.log(this.hot_list[0]);
					}
				} ).catch( (error)=>{
					console.log(error);
				} );
			}
		},
		created(){
			this.location();
		}
	}
</script>

<style scoped>
	.hot{
		width: 100%;
		height: 100%;
		background-color: pink;
	}
	.hot .hot_header{
		width: 100%;
		float: left;
	}
	.hot .hot_middle{
		width: 100%;
		float: left;
	}
	.hot .hot_header h3{
		width: 20%;
		line-height: 55px;
		font-size: 25px;
		text-align: center;
		cursor: pointer;
		float: left;
	}
	.hot .hot_header a{
		width: 20%;
		line-height: 55px;
		border-radius: 6px;
		border: 0;
		background-color: skyblue;
		margin-top: 4%;
		margin-right: 13%;
		font-size: 20px;
		font-weight: bold;
		text-align: center;
		text-decoration: none;
		color: black;
		float: right;
	}
	.hot .hot_header a:hover{
		background-color: red;
		color: gold;
	}
	.hot .hot_middle ol{
		width: 80%;
		float: left;
		margin-left: 10%;
		list-style: none;
	}
	.hot .hot_middle ol li{
		width: 15%;
		height: 55px;
		background-color: #6495ED;
		font-weight: bold;
		border-radius: 6px;
		font-size: 20px;
		margin-left: 2%;
		text-align: center;
		cursor: pointer;
		float: left;
	}
	.hot .hot_middle ol li:first-child{
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		line-height: 27.5px;
	}
	.hot .hot_middle ol:first-child li,.hot .hot_middle ol li:nth-child(2),.hot .hot_middle ol li:nth-child(3),.hot .hot_middle ol li:nth-child(4),.hot .hot_middle ol li:nth-child(5){
		line-height: 55px;
	}
	.hot .hot_middle ol li:first-child{
		margin-left: 7.5%;
	}
	.hot .hot_middle ol li img{
		width: 80%;
		height: 80%;
		vertical-align: middle;
		/* margin-top: 5%; */
	}
	.hot .hot_middle ol li button{
		width: 100%;
		height: 100%;
		border: 0;
		background-color: #6495ED;
		border-radius: 6px;
		cursor: pointer;
		color: white;
		font-weight: bold;
		font-size: 20px;
	}
	.hot .hot_middle ol li button:hover{
		background-color: red;
		color: gold;
	}
</style>